import React from "react"

//可以利用 //#region //#endregion 将注释的语句进行折叠
//#region  事件处理
// export default class Event extends React.Component {
//     constructor(){
//         super()
//         this.state = {
//             msg:"我是旧的数据",
//             age:5
//         }
//     }
//     render () {
//         return  <div>
//         {/* 点击按钮使state中的数据发生改变 */}
//         <h1>{this.state.msg}</h1>
//         <button onClick = {()=>{ this.handleClick() }}>按钮</button>
//     </div>
//     }
//     handleClick=()=>{
//         // console.log('我被点击了')
//         console.log(this);
//         // this.state.msg = "我没有使页面数据改变,只是内部变了"
//         this.setState({
//             //只会改变对应的状态值, 
//             msg:"我真正的改变了数据,页面的数据也变了"
//         },function () {
//             console.log("在这里拿到最新的数据值:" + this.state.msg);
//         })
//         // 注意:this.setState的执行是异步的,要想拿到最新的数据值,要在回调中取
//     } 
// }
//#endregion

//注意:输入框与state中的数据是单向数据流,要手动完成双向数据
export default class Event extends React.Component {
    constructor(){
        super()
        this.state = {
            msg:"我是旧的数据"
        }
    }
    render () {
        return  <div>
        {/* 点击按钮使state中的数据发生改变 */}
        <h1>{this.state.msg}</h1>
        {/* 当input只有value此时的输入框是一个只读属性 ,可以通过onChange 改变 */}
        {/* 在react实现双向数据,2中方式 1. e 2. ref */}
        {/* <input type="text" value={this.state.msg} onChange = {(e)=> this.change(e)}/> */}
        <input type="text" value={this.state.msg} onChange = {()=> this.change()} ref="inp"/>
    </div>
    }
    // change=(e)=>{
    //     console.log(e.target)
    //     this.setState({
    //         //只会改变对应的状态值, 
    //         msg:e.target.value
    //     })
    // } 
    change=()=>{
        // console.log(this.refs.inp.value)
        this.setState({
            //只会改变对应的状态值, 
            msg:this.refs.inp.value
        })
    } 
}